<style lang="scss" scoped>
  .van-tab__text{
    font-size: 1.3rem !important;
  }
</style>

<template>
  <van-tabs v-model:active="active" @click="onClickTabs" :color="$store.getters.getMasterColor || mainColor" sticky>
    <van-tab v-for="item in tabList" :key="item.id" :title="item.name">
      <case-list :caseList="caseList"></case-list>
      <div v-if="caseList.length > 0">
        <div class="load-more color-l padding-all-m margB-l" v-if="finished==false" @click="getCaseList">加载更多</div>
      </div>
      <div class="no-data color-l padding-all-m" v-if="finished">已经到底了</div>
      <div class="t-center" v-else>
        <van-loading size="24px">加载中...</van-loading>
      </div>
      <!-- <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="getCaseList"
      >
        
      </van-list> -->
    </van-tab>
  </van-tabs>
</template> 
<script>
import { Tab, Tabs, List, Loading } from 'vant';
import CaseList from "@/components/CaseList.vue";
export default {
  name: "CaseTabs",
  components: {
    [List.name]: List,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Loading.name]: Loading,
    CaseList
  },
  data() {
    return {
      active: 0,
      mainColor: "#FF0000",
      tabList: [{
        id: '',
        name: "所有方案",
      },{
        id: 0,
        name: "活动报名"
      },{
        id: 1,
        name: "寒假活动"
      },{
        id: 2,
        name: "暑假活动"
      },{
        id: 3,
        name: "抽奖活动"
      },{
        id: 4,
        name: "小游戏活动"
      }],
      caseList: [],
      loading: false,
      finished: false,
      pageNo: 1,
      pageSize: 10,
      type_id: ""
    }
  },
  mounted () {
    const _this = this;
    const tabList = _this.$store.getters.getCaseTabsList;
    if(tabList.length > 0){
      _this.tabList = tabList;
    }else{
      //调用接口获取tablist
      _this.getCaseType();
    }
    const caseList = this.$store.getters.getCaseList;
    if(caseList.length === 0) {
      _this.getCaseList()
    }else{
      _this.caseList = caseList
    }
    const caseListFinished = _this.$store.getters.getCaseListFinished;
    _this.finished = caseListFinished;
    // const mainColor = _this.$store.getters.getMainColor;
    // if(mainColor){
    //   _this.mainColor = mainColor;
    // }else{
    //   //调用接口获取mainColor
    // }
  },
  methods: {
    getCaseType() {
      let params = {
        pageNo: 1,
        pageSize: 100
      }
      this.$request.getCaseType(params).then(res=>{
        this.tabList = res.data.data
        this.tabList.unshift({
          id:0,
          name: "全部"
        })
        this.$store.commit('setCaseTabsList', this.tabList);
      })
    },
    onLoad() {
      console.log("onLoad")
    },
    getCaseList() {
      const _this = this;
      let params = {
        type_id: _this.type_id,
        pageNo: _this.pageNo,
        pageSize: _this.pageSize
      }
      console.log(params,"params")
      _this.$request.getCaseList(params).then(res=>{
        _this.caseList.push(...res.data.data)
        if(_this.pageNo >= (Math.floor(res.data.totalCount/10) + 1)){
          _this.finished = true;
          _this.$store.commit('setCaseListFinished', true);
        }else{
          _this.pageNo++
        }
        _this.$store.commit('setCaseList', _this.caseList);
      })
    },
    onClickTabs(index) {
      const _this = this;
      console.log("onClickTabs", index)
      console.log("_this.tabList[index].id", _this.tabList[index].id)
      _this.type_id = _this.tabList[index].id
      _this.pageNo = 1
      _this.caseList = []
      _this.finished = false;
      _this.getCaseList()
      // this.caseList = this.$store.getters.getCaseList
      // this.$emit("tabClick", index)
      // 请求接口获取对应的caseList
    }
  }
};
</script>
